<template>
  <div id="home" class="" :style="style">
    <!-- 用户信息 -->
    <div id="userinfo" class="">
      <img :src="userinfo.avatar" alt="" class="circle-border" />
    </div>
    <!-- 提示语 -->
    <div id="willinput" class="">
      <h1 class="">(左右滑动选择您的星座)</h1>
    </div>
    <!-- 开始选择 -->
    <div id="start" class="horizontal-center">
      <!-- 滑到前一个星座 -->
      <div id="previous" class=""></div>
      <!-- 星座展示 左滑与右滑 以及 进入 -->
      <CTheZodiac ref="cTheZodiac" />
      <!-- 滑到后一个星座 -->
      <div id="next" class=""></div>
    </div>
    <!-- 进入 -->
    <div id="enter" class="horizontal-center">
      <button v-on:click="handleEnter()" class="circle-border">
        <font>进入</font>
      </button>
    </div>
  </div>
</template>

<script>
import Fetch from '../../http/Fetch.js'
import CTheZodiac from './TheZodiac.vue'

export default {
  name: 'Home',
  components: {
    CTheZodiac,
  },
  props: {
    msg: String,
  },
  data: function() {
    return {
      // 用户信息
      userinfo: [],
      // 星座
      zodiac: {},
      // 样式
      style: {
        backgroundColor: '#11111c',
        backgroundImage: '',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        backgroundPosition: 'top',
      },
    }
  },
  created: function() {
    setTimeout(
      function() {
        this.init()
      }.bind(this),
      10
    )
  },
  methods: {
    /**
     * Async Init
     * 数据初始化
     *
     * @return void
     */
    async init() {
      this.userinfo = await new Fetch().get('/user', {})
      // this.userinfo = await new Fetch('http://localhost:8000').get('/user', {})
      this.styleBuild()
    },

    /**
     * StyleBuild
     * 样式构建
     *
     * @return void
     */
    styleBuild() {
      this.style.backgroundImage = 'url(' + require('../../assets/星空.png') + ')'
    },

    /**
     * HandleEnter
     * 进入详情界面
     *
     * @return void
     */
    handleEnter() {
      // 记录星座索引
      localStorage.setItem('zodiacIndex', this.$refs.cTheZodiac.current.index)
      // 调用父组件(入口组件)进入函数
      this.$parent.handleEnter()
    },
  },
}
</script>

<style scoped media="screen" lang="less">
@import '../../assets/button-animation.css';
/* 预定义 */
@displayRegin: 15rem; /* 星座展示区域宽度 */
@fullwidth: 30rem; /* 星座展示区域宽度 */

/* 节点属性 */
#home {
  /* background: #11111c url('../../assets/星空.png') no-repeat fixed top; */
  /* background-size: cover; */
  height: inherit;
  width: inherit;
}
/* 用户信息 */
#userinfo {
  height: 10rem;
  width: inherit;
  img {
    text-align: center;
    top: 50%;
    margin: 5rem 0 0 0;
    height: 5rem;
    width: 5rem;
  }
}
/* 提示语 */
#willinput {
  height: 7rem;
  width: inherit;
  margin: 5rem 0 0 0;
  h1 {
    font-size: 1rem;
    color: white;
  }
}
/* 开始选择 */
#start {
  height: 12rem;
  width: inherit;
  /* background: red; */
  /* 存放'上一个'按钮的区域 位于左边 */
  #previous {
    height: inherit;
    width: (@fullwidth - @displayRegin)/2;
    float: left;
  }
  /* 存放'下一个'按钮的区域 位于右边 */
  #next {
    height: inherit;
    width: (@fullwidth - @displayRegin)/2;
    float: left;
  }
}
#enter {
  height: 10rem;
  width: inherit;
  button {
    margin: 1rem 0 0 0;
    width: 9rem;
    height: 3rem;
    background: #11111c url('../../assets/星空.png') no-repeat fixed top;
    background-size: cover;
    border-color: #bbbbbb;
    font {
      font-size: 1.5rem;
      font-weight: 400;
      color: antiquewhite;
    }
  }
}

/* 类属性 */
.circle-border {
  background: red;
  border: 2px solid;
  border-radius: 5rem;
}

// 容器属性
/* 水平居中 */
.horizontal-center {
  display: flex;
  justify-content: center;
}
/* 垂直居中 */
.vertical-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
</style>
